<template>
  <div class="banner">
    <el-carousel
      height="67.5rem"
      :indicator-position="'none'"
    >
      <el-carousel-item
        v-for="item in banner"
        :key="item.id"
      >
        <img
          :src="item.image"
          alt=""
          class="banner-img"
          @click="getItem(item)"
        >
      </el-carousel-item>
    </el-carousel>
    <!-- <img
      v-if="this.$route.name != 'Fruit'"
      src="../../assets/img/pinpai.png"
      alt=""
      class="position-img"
    > -->
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let data = {
        category_id: 1,
      };
      this.$api.home.banner(data).then((res) => {
        // 执行某些操作
        if (res.code == 1) {
          console.log("banner", res.data)
          this.banner = res.data;
        }
      });
    },
    getItem(item) {
      if (item.type == 1) {
        //商品
        this.$router.push({
          path: "/fruit/detail",
          query: {
            id: item.redirect_id,
            iShopId: item.iShopId, // 店铺id
          },
        });
      } else if (item.type == 3) {
        //专题
        this.$router.push({
          path: "/topicDetail",
          query: {
            id: item.redirect_id,
          },
        });
      } else if (item.type == 4) {
        //外链
        window.location.open(item.url);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  height: 67.5rem;
  // display: flex;
  // overflow: hidden;
  display: block;
  position: relative;
  .position-img {
    position: absolute;
    width: 21.44rem;
    bottom: -5.815rem;
    right: 16.31rem;
    z-index: 100;
    cursor: pointer;
  }
  .banner-img {
    width: 100%;
    object-fit: contain;
    cursor: pointer;
  }
}
</style>
